<template>
    <div id="max">
        <div>设置/账号设置</div>
        <div id="mid">
            <div id="small">
                <P id="xiao">头像</P>
                <!-- <el-upload class="avatar-uploader"
                            action="http://172.16.114.53:8080/districtUser/changeAvatar"
                            method="post"
                            name="multipartFile"
                            :show-file-list="true"
                            :on-success="handleAvatarSuccess">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <span>更换头像</span>
                            </el-icon>
                        </el-upload> -->
                <img :src="imageUrl" width="70" height="60" />
            </div>
            <div id="small">
                <p id="xiao">姓名</p>
                <el-input v-model="input1" disabled placeholder="张三" />
            </div>
            <div id="small">
                <p id="xiao">手机号</p>
                <el-input v-model="input2" disabled placeholder="18995582555" />
            </div>
            <div id="small">
                <p id="xiao">所属组织</p>
                <el-input v-model="input3" disabled placeholder="疾控流调指挥中心" />
            </div>
            <div id="small">
                <p id="xiao">所属角色</p>
                <el-input v-model="input4" disabled placeholder="疾控排查员" />
            </div>
            <div id="small">
                <p id="xiao">账号</p>
                <el-input v-model="input5" disabled placeholder="张三" />
            </div>
            <div id="small-1">
                <div id="small">
                    <p id="xiao">密码</p>
                    <el-input v-model="input6" disabled placeholder="123456" />
                </div>
                <span id="lanse" @click="dialogVisible = true">修改密码</span>
            </div>
            <div id="small">
                <p id="xiao">出生年月</p>
                <el-input v-model="input7" disabled placeholder="1998-8-25" />
            </div>
            <div id="small-1">
                <div id="small">
                    <p id="xiao">绑定微信</p>
                    <el-input v-model="input8" disabled placeholder="" />
                </div>
                <span id="lanse">去绑定 >></span>
            </div>
        </div>
    </div>
    <el-dialog v-model="dialogVisible" title="修改密码" width="20%" :before-close="handleClose">
        <p id="xiao">修改密码</p>
        <el-input v-model="input9" placeholder="" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="edit()">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue';
import type { UploadProps } from 'element-plus';
import { ElMessageBox } from 'element-plus'
import axios from '@/util/http';

export default defineComponent({
    name: "zhanghaoshezhi",
    setup() {
        const input1 = ref(localStorage.userName);//姓名 
        const input2 = ref('17782392938');//手机号
        const input3 = ref(localStorage.area);//所属组织
        const input4 = ref(localStorage.role);//所属角色
        const input5 = ref('wangwu');//账号
        const input6 = ref(123456);//密码
        const input7 = ref('2023-02-27');//出生年月
        const input8 = ref('17782392938');//微信
        const input9 = ref('')

        //上传头像
        let imageUrl = ref(localStorage.headPortrait)

        // const handleAvatarSuccess: UploadProps['onSuccess'] = (
        //     response,
        //     uploadFile
        // ) => {
        //     imageUrl.value = URL.createObjectURL(uploadFile.raw!)
        // }

        const each: any = reactive({
            id: ''
        })
        let data: any = reactive([])
        //数据渲染
        let Table = reactive({
            table: []
        })
        //数据拿取
        onMounted(() => {
            axios({
                method: 'get',
                url: '/districtUser/queryDistrictUserById',
                params: {
                    id: localStorage.id
                }
            }).then((res) => {
                console.log(res);
                Table.table = res.data.data;
                res.data.data.forEach((itme) => {
                    each.id = itme.userId
                    data.push(JSON.parse(JSON.stringify(each)))
                })
            })
        })

        function edit() {
            axios({
                method: 'post',
                url: '/districtUser/changePassword',
                params: {
                    id:input9.value
                }
            }).then((res) => {
                console.log('修改成功');
                dialogVisible.value = false
            })
        };

        const dialogVisible = ref(false)

        const handleClose = (done: () => void) => {
            ElMessageBox.confirm('确定关闭?')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }
        return {
            input1,
            input2,
            input3,
            input4,
            input5,
            input6,
            input7,
            input8,
            input9,
            // handleAvatarSuccess,
            imageUrl,
            edit,
            dialogVisible,
            handleClose,
        }
    }
})

</script>

<style scoped>
#max {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #333;
}

#mid {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 50px 30px;
    margin-top: 20px;
}

#small {
    display: flex;
    flex-direction: row;
    width: 264px;
    height: 55px;
    margin: 5px 0;
}

#lanse {
    display: flex;
    align-items: end;
    cursor: pointer;
    color: blue;
}

#xiao {
    display: flex;
    align-items: center;
    width: 98px;
    height: 55px;
}

#small-1 {
    display: flex;
    flex-direction: row;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

/* #da{
    width: 186px ;
    height: 55px ;
} */
</style>